<template>
  <div class="ppt-viewer">
    <div class="ppt-message">
      <div class="ppt-icon">
        <i class="file-icon"></i>
      </div>
      <h3>{{ file.name }}</h3>
      <p>{{ message }}</p>

      <!-- 如果有服务端支持，可以添加预览按钮 -->
      <button v-if="hasServerSupport" @click="sendToServer" class="preview-btn">
        转换并预览
      </button>

      <!-- 预览区域 -->
      <div v-if="slides.length > 0" class="slides-container">
        <div class="slide-controls">
          <button @click="prevSlide" :disabled="currentSlide <= 0">上一页</button>
          <span>{{ currentSlide + 1 }} / {{ slides.length }}</span>
          <button @click="nextSlide" :disabled="currentSlide >= slides.length - 1">下一页</button>
        </div>
        <div class="slide">
          <img :src="slides[currentSlide]" :alt="`Slide ${currentSlide + 1}`" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PowerPointViewer',
  props: {
    file: {
      type: Object,
      required: true
    },
    fileData: {
      type: [ArrayBuffer, null],
      required: true
    }
  },
  data() {
    return {
      message: 'PowerPoint 预览需要服务端支持，请考虑使用 Office Web Viewer 或其他第三方服务',
      hasServerSupport: false, // 是否有服务端支持
      slides: [], // 幻灯片图片列表
      currentSlide: 0 // 当前幻灯片索引
    };
  },
  methods: {
    // 发送到服务器进行转换
    sendToServer() {
      // 这里是示例代码，实际使用时需要替换为真实的服务端 API
      this.message = '正在转换，请稍候...';

      const formData = new FormData();
      formData.append('file', this.file);

      // 假设有一个 API 端点用于转换 PPT
      /*
      this.$http.post('/api/convert-ppt', formData).then(response => {
        // 假设服务端返回转换后的图片列表
        this.slides = response.data.slides;
        this.message = '转换成功！';
      }).catch(error => {
        console.error('PPT 转换失败:', error);
        this.message = 'PPT 转换失败，请重试';
        this.$emit('error', 'PPT 转换失败');
      });
      */

      // 由于没有实际的服务端，这里模拟一个成功响应
      setTimeout(() => {
        // 模拟幻灯片数据
        this.slides = [
          'https://via.placeholder.com/800x600/eee?text=Slide+1',
          'https://via.placeholder.com/800x600/eee?text=Slide+2',
          'https://via.placeholder.com/800x600/eee?text=Slide+3'
        ];
        this.message = '转换成功！';
      }, 2000);
    },

    // 上一张幻灯片
    prevSlide() {
      if (this.currentSlide > 0) {
        this.currentSlide--;
      }
    },

    // 下一张幻灯片
    nextSlide() {
      if (this.currentSlide < this.slides.length - 1) {
        this.currentSlide++;
      }
    }
  }
};
</script>

<style scoped>
.ppt-viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 400px;
}

.ppt-message {
  text-align: center;
  padding: 20px;
}

.ppt-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.file-icon {
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: #FF8C00;
  position: relative;
  border-radius: 5px;
}

.file-icon:before {
  content: "PPT";
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.preview-btn {
  background-color: #FF8C00;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
  font-size: 14px;
}

.preview-btn:hover {
  background-color: #e67e00;
}

.slides-container {
  margin-top: 20px;
  width: 100%;
}

.slide-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  gap: 10px;
}

.slide-controls button {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.slide-controls button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.slide {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.slide img {
  max-width: 100%;
  max-height: 500px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>